<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

        <view v-if="isLoad" class="main padding-project">
            <!-- parse <include src="../edit/user_form.wxml"/> -->
            <block>
                <view class="form-box shadow-project card-project">
                    <view class="form-group padding-top-s" v-if="userRegCheck && user.USER_STATUS == 8">
                        <view v-if="!user.USER_CHECK_REASON" class="hint-desc text-red">
                            <text class="icon-notice"></text>
                            审核未通过：请修改资料后重新提交
                        </view>
                        <view v-else class="hint-desc text-red">
                            <text class="icon-notice"></text>
                            审核未通过：{{ user.USER_CHECK_REASON }}。请修改资料后重新提交
                        </view>
                    </view>
                    <view class="form-group padding-top-s" v-else-if="userRegCheck && user.USER_STATUS == 0">
                        <view class="hint-desc text-orange">
                            <text class="icon-notice"></text>
                            您的注册资料已经提交，请耐心等待审核~
                        </view>
                    </view>

                    <view class="form-group">
                        <view class="title must">昵称</view>
                        <input type="nickname" placeholder="填写您的昵称" placeholder-class="phc" v-model="formName" maxlength="30" />
                    </view>
                    <view v-if="formNameFocus" class="hint-desc error">{{ formNameFocus }}</view>

                    <view class="form-group">
                        <view class="title must">手机</view>
                        <input v-if="!mobileCheck" placeholder="填写您的手机号码" placeholder-class="phc" v-model="formMobile" maxlength="11" />

                        <block v-else>
                            <view class="mobile">{{ formMobile || '未填写' }}</view>
                            <button open-type="getPhoneNumber" @getphonenumber="bindGetPhoneNumber" class="btn phone-button">
                                <text v-if="!formMobile">一键填写手机号</text>
                                <text v-else>一键修改手机号</text>
                            </button>
                        </block>
                    </view>

                    <view class="form-group">
                        <view class="title must">密码</view>
                        <input type="password" placeholder="填写您的密码" placeholder-class="phc" v-model="formPassword" maxlength="30" />
                    </view>
                    <view v-if="formMobileFocus" class="hint-desc error">{{ formMobileFocus }}</view>
                </view>

                <view class="form-box shadow-project card-project margin-top-xs">
                    <cmpt-form-show id="cmpt-form" mark="cmpt-form" :isCacheMatch="false" :fields="fields" :forms="formForms" :isDefMatch="isEdit ? false : true"></cmpt-form-show>
                </view>
            </block>
            <button @tap="bindSubmitTap" class="btn-base btn-project shadow">提交注册</button>
        </view>
    </view>
</template>

<script>
import cmptFormShow from '@/cmpts/public/form/form_show/form_show_cmpt';
const pageHelper = require('@/utils/helper/page_helper.js');
const helper = require('@/utils/helper/helper.js');
const api = require('@/api/api.js');
const validate = require('@/utils/helper/validate.js');
const ProjectBiz = require('@/utils/biz/project_biz.js');
const projectSetting = require('@/utils/public/project_setting.js');
const setting = require('@/utils/setting/setting.js');
const PassportBiz = require('@/utils/comm/biz/passport_biz.js');
export default {
    components: {
        cmptFormShow
    },
    data() {
        return {
            isLoad: false,
            isEdit: false,
            mobileCheck: setting.MOBILE_CHECK,
            fields: '',
            formName: '',
            formMobile: '',
            formPassword: '',
            formForms: '',
            userRegCheck: '',

            user: {
                USER_STATUS: 0,
                USER_CHECK_REASON: ''
            },

            formNameFocus: null,
            formMobileFocus: null
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        ProjectBiz.initPage(this);
        if (options && options.retUrl) {
            this.retUrl = decodeURIComponent(options.retUrl);
        }
        await this.loadDetailFun();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: async function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        loadDetailFun: async function (e) {
            let opts = {
                title: 'bar'
            };
            let isLogin = await PassportBiz.isLogin();
            if (isLogin) {
                return uni.redirectTo({
                    url: '../index/my_index'
                });
            }
            this.setData({
                isLoad: true,
                fields: projectSetting.USER_FIELDS,
                formName: '',
                formMobile: '',
                formForms: []
            });
        },

        bindGetPhoneNumber: async function (e) {
            PassportBiz.getPhone(e, this);
        },

        bindSubmitTap: async function (e) {
            try {
                let data = this;

                // 数据校验
                data = validate.check(data, PassportBiz.CHECK_FORM_REG, this);
                if (!data) {
                    return;
                }
                let forms = this.zpSelectComponent('#cmpt-form').getForms(true);
                if (!forms) {
                    return;
                }
                const postData = {
                    username: this.formName,
                    phone: this.formMobile,
                    password: this.formPassword,
                    forms,
                    status: projectSetting.USER_REG_CHECK ? 0 : 1
                };
                let opts = {
                    title: '提交中'
                };
                await api.register(postData, opts).then((result) => {
                    if (result && helper.isDefined(result.token) && result.token) {
                        // 用户需要审核，不能登录
                        if (!projectSetting.USER_REG_CHECK) {
                            PassportBiz.setToken({
                            id: result.userInfo.id,
                            name: result.userInfo.username,
                            status: result.userInfo.status || 1,
                            token: result.token,
                            avatar: result.userInfo.avatar
                        });
                        }
                        let callback = () => {
                            if (this.retUrl == 'back') uni.navigateBack();
                            else if (this.retUrl) {
                                uni.redirectTo({
                                    url: this.retUrl
                                });
                            } else {
                                uni.reLaunch({
                                    url: '../index/my_index'
                                });
                            }
                        };
                        if (projectSetting.USER_REG_CHECK) {
                            pageHelper.showModal('注册完成，等待系统审核', '温馨提示', callback);
                        } else {
                            pageHelper.showSuccToast('注册成功', 1500, callback);
                        }
                    }
                });
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.error(err);
            }
        }
    }
};
</script>
<style>
@import './my_reg.css';
</style>
